<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
		</style>
	</head>

	<body>
		<canvas ></canvas>
	</body>
	<script type="text/javascript">
		var canvas=document.querySelector("canvas");
		var width=document.documentElement.clientWidth;
		var height=document.documentElement.clientHeight;
		canvas.width=width;
		canvas.height=height;
		
		var ctx=canvas.getContext("2d");
		
		function Bull(){
			this.r=10;
			this.x=parseInt(Math.random()*width);
			this.y=parseInt(Math.random()*height);
			this.bg="rgb("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+")";
			this.seepX=Math.random()*10+1;
			this.seepY=Math.random()*10+1;
			this.txet="aaa";
			
		}
		Bull.prototype.rander=function(){
			
			this.x+=this.seepX;
			this.y+=this.seepY;
			if(this.x>=width-this.r){
				this.seepX=-Math.abs(this.seepX);
			}
			if(this.x<=this.r){
				this.seepX=Math.abs(this.seepX);
			}
			if(this.y>=height-this.r){
				this.seepY=-Math.abs(this.seepY);
			}
			if(this.y<=this.r){
				this.seepY=Math.abs(this.seepY);
			}
			
			
			ctx.beginPath();
			ctx.fillStyle=this.bg;
			ctx.strokeStyle=this.bg;
			ctx.font="16px '微软雅黑"
			ctx.fillText(this.txet,this.x+this.r,this.y+8);
			ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
			ctx.fill()
		}
		var arr=[];
		for(var i=0;i<30;i++){
			arr.push(new Bull());
		}
		setInterval(function(){
			ctx.clearRect(0,0,width,height)
			for(var i=0;i<arr.length;i++){
				arr[i].rander();
				for(var j=0;j<arr.length;j++){
					var left=Math.abs(arr[i].x-arr[j].x);
					var tops=Math.abs(arr[i].y-arr[j].y);
					if(left<200&&tops<200){
						ctx.beginPath();
						ctx.moveTo(arr[j].x,arr[j].y);
						ctx.lineTo(arr[i].x,arr[i].y);
						ctx.stroke();
					}
					
				}
			}
		},100)
		
	</script>
	
</html>